<template lang="pug">
.goods-pc
  Loading(v-if='isLoadingShow && getLoadImage && isShowLoading' @closeLoading='closeLoading')

  //- 详情信息展示框
  .goods-detail(v-if="showDetail" :style="{'backgroundColor': bgColor}")
    van-icon.goods-detail-close(name="clear" color="#999" size="28" @click="close")
    .goods-detail-wai
      .goods-detail-content(style="background: url(static/images/pczhezhao.png) center center no-repeat;background-size: cover;")
        img.goods-detail-img(:src="model.full_mat_pic" v-if="model.type == 3")
        .adssad(v-else)
          iframe.goods-detail-iframe(v-show="showIframe" :src="model.preview")
      .goods-detail-dec
        .goods-detail-dec-top
          p.omit {{model.title}}
          //- i.iconfont(:class="musicSwitch?'icon-sound':'icon-sound_close'")
          van-icon(v-if="model.full_audio_file" :name="musicSwitch?'play-circle':'pause-circle'" color="#fff" size="28" @click="playMusic")
        .goods-detail-dec-middle
          p 年代：{{model.age || '无'}}
          p 尺寸：{{model.size || '无'}}
          p 材质：{{model.texture || '无'}}
        .goods-detail-dec-bottom {{model.description}}

  //- 扫一扫
  .scan-qrcode(:style="{'color': nameColor, 'borderColor': borderColor}" v-if="scan")
    span 扫一扫
    van-icon(name="scan" :color="nameColor" size="18" style="vertical-align: sub;margin-left: 7px;")
  .scan-qrcode-img
    img(:src="scan")
  //- logo
  .goods-logo(v-show="logoShow")
    img(:src="logo")
  //- 箭头
  .goright(style="position:absolute;right:3%;top:48%;width:25px;" v-show="logoShow")
    img(src="static/images/pcright.png" style="width: 100%;")
  //- 简介
  i.iconfont.icon-fasongtuwen.hand(
    v-show="desc && logoShow"
    style="position:absolute;left:3%;top:4vh;font-size:26px;color:#fff;"
    :style="{'color': nameColor}"
    @click.stop="showIntro")

  //- 轮播
  .swiper-container.swiper-container-initialized.swiper-container-horizontal
    .swiper-wrapper(style="transition: all 0ms ease 0s; transform: translate3d(-580px, 0px, 0px);")
      .swiper-slide(style="width: 580px;" v-for="(child, index) in list" :key="index")
        .swiper-slide-child(v-for="(item, ix) in child.child"
          :key="ix"
          :style="{'top': item.toppx, 'left': item.leftpx}"
          :item='`${index}-${ix}`'
          @click.stop="showDetailModal(item)")
          //- item.full_mat_pic
          .swiper-slide-img
            img(:src="item.full_icon_src")
          .swiper-slide-title(:style="{'color': nameColor, 'borderColor': borderColor}") {{item.title}}

  Intro(ref="Intro")
</template>

<script>
import { mapGetters } from 'vuex'
import goodsAndWorks from '@/mixins/goodsAndWorks'
import { sortId } from '@/utils'
let bgMusicObj = null

export default {
  mixins: [goodsAndWorks],
  components: {
    Intro: _ => import('@/components/Modal/pc/intro')
  },
  data() {
    return {
      showIframe: false,
      isLoadingShow: false,
      logo: '',
      scan: '',
      bgColor: '',
      nameColor: '',
      borderColor: '',
      name: '',
      desc: '',
      list: [],
      titleStyle: null,
      showDetail: false,
      musicSwitch: false,
      logoShow: true,
      model: {},
      posi: [
        [
          {top: '23%', left: '5%'},
          {top: '10%', left: '54%'},
          {top: '39%', left: '52%'},
          {top: '67%', left: '9%'},
          {top: '69%', left: '56%'},
        ],
        [
          {top: '5%', left: '4%'},
          {top: '37%', left: '9%'},
          {top: '14%', left: '50%'},
          {top: '75%', left: '14%'},
          {top: '55%', left: '54%'},
        ],
        [
          {top: '6%', left: '2%'},
          {top: '10%', left: '56%'},
          {top: '38%', left: '36%'},
          {top: '69%', left: '10%'},
          {top: '65%', left: '55%'},
        ],
        [
          {top: '8%', left: '15%'},
          {top: '28%', left: '55%'},
          {top: '40%', left: '10%'},
          {top: '50%', left: '55%'},
          {top: '71%', left: '24%'},
        ]
      ],
    }
  },
  // computed: {
  //   ...mapGetters(['loadInfo']),
  // },
  mounted() {
    if (this.$route.params.id) {
      this.$API('getGoodsData', [this.$route.params.id]).then(res => {
        console.log(res)
        if (res.code == 200) {

          let infoLoad = null
          let backData = res.data
          if (backData.load_type == 1) {
            infoLoad = {
              fk_userpano_load_id: backData.fk_userpano_load_id,
              load_type: backData.load_type,
            }
          } else {
            if (backData.load) {
              backData.load.pc_load_img = backData.load.full_pc_load_img
              backData.load.load_img = backData.load.full_load_img
              backData.loadinfo = backData.load
              infoLoad = backData.loadinfo
              infoLoad.load_type = backData.load_type
              infoLoad.fk_userpano_load_id = backData.fk_userpano_load_id
            }
          }
          this.$store.dispatch('fetchOverviewLoadInfo', infoLoad)
          this.isLoadingShow = backData.is_loading

          // 名称和简介
          this.name = backData.name
          this.desc = backData.description

          if (backData.full_logo) {
            this.logo = backData.full_logo
          }
          if (backData.full_thumb_wxcodeurl) {
            this.scan = backData.full_thumb_wxcodeurl
          }
          if (backData.pano_name_font_color) {
            this.nameColor = backData.pano_name_font_color
          }
          if (backData.pano_name_textbox_color) {
            this.borderColor = backData.pano_name_textbox_color
          }
          if (backData.background_color) {
            this.bgColor = backData.background_color
            document.getElementsByTagName("body")[0].style.background = backData.background_color
          }
          let goodsArr = backData.vgo_goods_list
          if (goodsArr && goodsArr.length > 0) {
            let tempList = []
            goodsArr.sort(sortId)
            if (goodsArr.length < 6) {
              tempList = [{
                child: goodsArr
              }]
            } else {
              // console.log('222--------')
              if (goodsArr.length % 5 == 0) {
                for (var i = 0; i < parseInt(goodsArr.length / 5); i++) {
                  tempList.push({child: goodsArr.slice(i*5, i*5+5)})
                }
              } else {
                for (var i = 0; i < parseInt(goodsArr.length / 5) + 1; i++) {
                  tempList.push({child: goodsArr.slice(i*5, i*5+5)})
                }
              }
              
            }
            console.log(tempList)
            tempList.map(item => {
              if (item.child && item.child.length > 0) {
                let ran = parseInt(Math.random() * 4)
                let posi = this.posi[ran]
                item.child.map((it, index) => {
                  it.toppx = posi[index].top
                  it.leftpx = posi[index].left
                })
              }
            })
            this.list = tempList
            
            this.initRotation()
          }

          setTimeout(() => {
            this.getWXShareData(backData)
          }, 3000)
        }
      })
    }
  },
  methods: {
    // 查看简介
    showIntro() {
      // let desc = this.desc.split('    ')
      // desc = desc.filter(Boolean)
      // console.log(desc)
      let obj = {
        title: this.name,
        text: this.desc,
        goods: 1,
      }
      this.$refs.Intro.openModal(obj)
    },
    // 播放音乐按钮
    playMusic() {
      if (this.musicSwitch) {
        this.playBgMusic()
      } else {
        this.pauseBgMusic()
      }
    },
    // 创建音乐
    createMusicObj(data) {
      if(!data) return

      bgMusicObj = new Audio()
      bgMusicObj.src = data
      bgMusicObj.loop = true
      bgMusicObj.volume = '0.9'
      bgMusicObj.id = 'goodsAudio'
    },
    // 播放背景音乐
    playBgMusic() {
      if(bgMusicObj) {
        setTimeout(() => {
          bgMusicObj.play()
          this.musicSwitch = false
        }, 1500)
      }
    },
    // 暂停背景音乐
    pauseBgMusic() {
      if(bgMusicObj) {
        setTimeout(() => {
          bgMusicObj.pause()
          this.musicSwitch = true
        }, 500)
      }
    },
    // 查看详情
    showDetailModal(item) {
      this.logoShow = false
      // console.log(item)
      this.model = item
      this.showDetail = true
      setTimeout(() => {
        this.showIframe = true
      }, 2000)
      // 播放音乐
      if (item.full_audio_file) {
        if (bgMusicObj) {
          bgMusicObj.src = item.full_audio_file
          this.playBgMusic()
        } else {
          this.createMusicObj(item.full_audio_file)
          this.playBgMusic()
        }
      }
    },
    close() {
      this.pauseBgMusic()
      this.showDetail = false
      this.logoShow = true
      this.showIframe = false
    },
    // 初始化
    initRotation() {
      this.$nextTick(() => {
        var swiper = new Swiper('.swiper-container', {
          slidesPerView: "auto",
          preventLinksPropagation: !1,
          spaceBetween: 0,
          autoplay: !0,
          speed: 3E4,
          loop: !0,
          freeMode: !0,
          autoplay: {
            delay: 1,
            disableOnInteraction: !1
          },
          pagination: {}
        })
        let item = document.querySelectorAll('.swiper-slide-child')
        for (let idx = 0; idx < item.length; idx++) {
          const element = item[idx]
          element.addEventListener('click', () => {
            let arr = element.getAttribute('item').split('-')
            // console.log(this.list[arr[0]].child[arr[1]])
            this.showDetailModal(this.list[arr[0]].child[arr[1]])
          })
        }
      })
    },
  },
}
</script>

<style lang="stylus">
.goods-pc
  position relative
  width 90%
  height 80vh
  padding 10vh 5%
  // margin 0 auto
  // margin-top 10vh
  .goods-detail
    width 90%
    height 80%
    position absolute
    z-index 3
    .goods-detail-close
      position absolute
      z-index 3
    .goods-detail-wai
      display flex
      justify-content space-between
      .goods-detail-content
        width 70%
        height 80vh
        position relative
        .goods-detail-iframe
          width 100%
          height 80vh
          border 0
        .goods-detail-img
          width 50%
          height auto
          position absolute
          top 50%
          left 50%
          transform translate(-50%,-50%)
      .goods-detail-dec
        width 30%
        color #fff
        padding 3% 0 0 3%
        .goods-detail-dec-top
          display flex
          p
            width 70%
            font-size 14px
          i
            width 30%
        .goods-detail-dec-middle
          padding 10% 0 3%
          border-bottom 1px solid #999
          p
            font-size 12px
            margin-top 3%
            color #999
        .goods-detail-dec-bottom
          margin-top 3%
          font-size 12px
          color #999
          max-height 46vh
          overflow-y auto
          line-height 2
          white-space break-spaces


  .scan-qrcode-img
    display none
    position absolute
    right 5%
    bottom calc(10vh+35px)
    width 100px
    z-index 2
    border 5px solid rgba(#409EFF, 0.5)
    img
      width 100px
  .scan-qrcode
    z-index 2
    position absolute
    right 5%
    bottom 10vh
    padding 2px 10px
    font-size 14px
    border-radius 20px
    border 1px solid #fff
    cursor pointer
    span
      font-family serif
      font-weight 100
    &:hover
      ~.scan-qrcode-img
        display block
  .goods-logo
    position absolute
    right 5%
    top 2vh
    z-index 1
    img
      width auto
      height 100px
  .swiper-container
    width 100%
    height 80vh
    .swiper-slide
      color #fff
      flex-wrap wrap
      position relative
      // text-align center
      // font-size 18px
      // background #fff

      // Center slide text vertically
      // display -webkit-box
      // display -ms-flexbox
      // display -webkit-flex
      // display flex
      // -webkit-box-pack center
      // -ms-flex-pack center
      // -webkit-justify-content: center
      // justify-content center
      // -webkit-box-align center
      // -ms-flex-align center
      // -webkit-align-items center
      // align-items center
      .swiper-slide-child
        cursor pointer
        max-width 250px
        max-height 150px
        position absolute
        display flex
        transition all 0.5s
        align-items: center
        &:hover
          transform scale(1.1)
          transition all 0.5s
        .swiper-slide-title
          width 14px
          font-size 14px
          padding 2px 3px
          margin-left 5px
          max-height 150px
          border 1px solid #f00
          writing-mode vertical-rl
          text-align center
          display flex
          flex-direction column
          justify-content center
        .swiper-slide-img
          max-width 220px
          max-height 150px
          img
            max-width 220px
            max-height 150px
            // width 220px
            // height 150px
</style>